<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			form .mui-table-view-cell:after {
				height: 0;
				left: 0;
			}
			
			.mui-btn-block {
				font-weight: bold;
			}
			
			.mui-input-group{
				padding: 10px 0 5px;
			}
			.mui-input-group .mui-input-row{height: 50px;}
			.mui-input-row.amount label {
				width: auto;
				float: none;
				font-size: 1.3em;
				line-height: 1.8em;
				padding: 0px 10px 11px 15px;
				vertical-align: top;
			}
			
			.mui-input-row.amount label~input {
				height: 50px;
				width: 80%;
				float: none;
				padding: 0;
				margin-left: 2px;
				font-size: 1.2em;
				line-height: 1em;
				border-bottom: solid 1px #eee;
			}
			
			.mui-input-group .mui-input-row:after {
				height: 0;
			}
			
			.mui-input-row.deposit{margin-left: 35px;}
			.mui-input-row.deposit input{font-size: 1.2em;height: 50px;}
			.summary > div{padding: 5px 0;}
			.item > div{padding: 3px 0;}
			.pay{color: #999;}
			.text-pay{padding-left: 2em;}
			.btn-pay{border-width: 0;border-radius: 0;height:50px;font-size: 1.1em;text-align: center;}
			nav.mui-bar-tab{height: 50px;}
			.mui-content{margin-bottom: 60px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">确认还款计划</h1>
		</header>
		<div class="mui-content">			
			<ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">		        
		        <li class="mui-table-view-cell item" v-for="item in items">
		            <div class="mui-row">
						<div class="mui-col-xs-5">快速还款 <span v-text="item.Amount">0.00</span></div>
						<div class="mui-col-xs-7 mui-text-right" v-text="item.ActionTime"></div>
					</div>
					<div class="mui-row pay" v-for="pay in item.Pays">
						<div class="mui-col-xs-5 text-pay">消费 <span v-text="pay.Amount">0.00</span></div>
						<div class="mui-col-xs-7 mui-text-right" v-text="pay.ActionTime"></div>
					</div>
		        </li>
		  	</ul>
		  	<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  		<li class="mui-table-view-cell item">
		        	<div class="mui-row">
						<div class="mui-col-xs-5">还款总额 </div>
						<div class="mui-col-xs-7 mui-text-right">￥<span v-text="plan.BillingAmount">0.00</span></div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-5">开始时间</div>
						<div class="mui-col-xs-7 mui-text-right" v-text="plan.BeginDate">2017-11-10</div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-5">结束时间</div>
						<div class="mui-col-xs-7 mui-text-right" v-text="plan.EndDate">2017-11-20</div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-5">还款数量</div>
						<div class="mui-col-xs-7 mui-text-right"><span v-text="plan.Quantity">0</span> 笔</div>
					</div> 
		        </li>
		    </ul>
		  	<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		  		<li class="mui-table-view-cell summary">
					<div class="mui-row">
						<div class="mui-col-xs-5">保证金</div>
						<div class="mui-col-xs-7 mui-text-right color-red">￥<span v-text="plan.RepaymentAmount">0.00</span></div>
					</div> 
					<div class="mui-row">
						<div class="mui-col-xs-5">手续费</div>
						<div class="mui-col-xs-7 mui-text-right color-red">+￥<span v-text="plan.Fee">0.00</span></div>
					</div> 
				</li>
		  	</ul>		  	
			<nav class="mui-bar mui-bar-tab mui-text-right">
				<div class="mui-table">
					<div class="mui-table-cell mui-col-xs-8 text-middle color-red" style="font-weight: normal;padding-right: 20px;">
						实际支付 ￥<span v-html="formatAmount(plan.RepaymentAmount+plan.Fee)">0</span>
					</div>
					<div class="mui-table-cell mui-col-xs-4 text-middle btn-pay mui-btn-danger" @tap="submitPlan()">
						提交计划					
					</div>
				</div>
			</nav>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			
			var id = 0;
			 
			submitPlan = function () {
				mui.showLoading(); 
				app.post("AddRepaymentPlan", {ID:id}, function (data) { 
					if(data.isSuccess){
						mui.openWindow("checkout.html?Amount={0}&ID={1}&TradeType={2}".format(data.data.Amount, id, resources.PayTradeType.Repay), "checkout.html");
					}
					else{
						mui.alert(data.message);
					} 
				})
			}
			
			init = function () {
				var wv = plus.webview.currentWebview();
				var data = wv.data;
				
				id = data.Plan.ID;
				
				var vm = new Vue({
					el: '.mui-content',
					data: {
						'plan': data.Plan,
						'items': data.Items
					},
					created: function() { 
					},
					computed: {},
					methods: {}
				});
			}
			
			mui.plusReady(function () {
				init();
			})
		</script>
	</body>

</html>